{% load static %}
<!doctype html>
<html lang="zh">
<head>
    <title>车牌识别</title>
    <link rel="shortcut icon" href="{% static 'car-recognition.png' %}">
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
    <link rel="stylesheet" href="{% static 'css/carRecognition.css' %}">
</head>
<body>
<div class="container">
    <div class="row h-100"> <!-- 添加 h-100 以确保行的高度占满容器 -->
        <div class="col uploadCss">
            <div style="width: 100%;"></div>
            <div class="container mt-4">
                <h2 class="fst-italic">请选择汽车图片上传识别</h2>
                <form id="uploadForm" enctype="multipart/form-data">
                    <div class="mb-3">
                        <label for="imageUpload" class="form-label">
                            <h6><span class="badge bg-secondary">New</span></h6>
                        </label>
                        <input class="form-control form-control-lg" type="file" name="imageUpload" id="imageUpload"
                               accept="image/*" required>
                    </div>
                    <div class="mb-3">
                        <div class="d-grid gap-2">
                            <button class="btn btn-outline-danger btn-lg" type="button" id="startDetectionBtn">
                                <span class="fw-semibold">检&emsp;&emsp;测</span>
                                <span class="spinner-border spinner-border-sm " role="status" aria-hidden="true" style="display: none;"></span>
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <div class="col">
            <div id="previewContainer" class="d-flex justify-content-center align-items-center h-100">
                <img id="imgPreview" class="img-preview img-fluid img-thumbnail" src="" alt="">
            </div>
        </div>
    </div>
</div>
<script src="{% static 'js/bootstrap.bundle.min.js' %}"></script>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const imageUpload = document.getElementById('imageUpload');
        const imgPreview = document.getElementById('imgPreview');
        const uploadForm = document.getElementById('uploadForm');
        const startDetectionBtn = document.getElementById('startDetectionBtn');

        // 当用户选择图片时
        imageUpload.addEventListener('change', function (event) {
            const file = event.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function (e) {
                    imgPreview.src = e.target.result;
                };
                reader.readAsDataURL(file);
            } else {
                imgPreview.src = '';
            }
        });

        // 开始检测按钮点击事件
        startDetectionBtn.addEventListener('click', function () {
            const file = imageUpload.files[0];

            if (!file) {
                alert('请先上传图片！');
                return;
            }

            // 显示加载图标
            const spinner = startDetectionBtn.querySelector('.spinner-border');
            spinner.style.display = 'inline-block';
            startDetectionBtn.disabled = true;

            const formData = new FormData(uploadForm);
            fetch('/licensePlateRecognition/', {
                method: 'POST',
                body: formData
            })
                .then(response => {
                    if (response.ok) {
                        return response.json();
                    } else {
                        throw new Error('请求失败');
                    }
                })
                .then(res => {
                    console.log(res);
                    if (res.code === 200) {
                        // 识别成功
                        const license_plate = res.data.license_plate;
                        const household_info = res.data.household_info;
                        if (household_info) {
                            alert(`住户: ${household_info[1]} 的车识别成功！\n车牌号：${license_plate}`);
                        } else {
                            alert(`临时车辆！\n车牌号：${license_plate}`);
                        }
                    } else {
                        alert('车牌识别失败，请重试！');
                    }

                    // 隐藏加载图标
                    spinner.style.display = 'none';
                    startDetectionBtn.disabled = false;

                    // 检测成功后弹出确认框
                    if (confirm('是否要继续进行下一次检测？')) {
                        window.location.reload(true);
                    }
                })
                .catch(error => {
                    // 失败回调
                    console.error('Error:', error);
                    alert('车牌识别失败，请重试！');

                    // 隐藏加载图标
                    spinner.style.display = 'none';
                    startDetectionBtn.disabled = false;

                    if (confirm('是否要继续进行下一次检测？')) {
                        window.location.reload(true);
                    }
                });
        });
    });
</script>
</body>
</html>